<template>
  <div class="line-echarts" ref="lineChartRef"></div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
type EChartsOption = echarts.EChartsOption;

let chart: echarts.ECharts;
let lineChartRef = ref();

onMounted(() => {
  chart = echarts.init(lineChartRef.value);
  chart.setOption(option);
});

const option: EChartsOption = {
  grid: {
    top: '10%',
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    textStyle: {
      color: '#fff',
      fontSize: 16
    }
  },
  xAxis: {
    type: 'category',
    data: ['2019年', '2020年', '2021年', '2022年', '2023年'],
    axisLine: {
      lineStyle: {
        color: '#fff'
      }
    }
  },
  yAxis: {
    type: 'value',
    splitLine:{
      lineStyle:{
        type: 'dashed',
        color: '#e8c433'
      }
    },
    axisLine: {
      lineStyle: {
        color: '#fff'
      }
    }
  },
  series: [
    {
      name: "增长人数（人）",
      data: [123, 252, 273, 175, 240],
      type: 'line',
      itemStyle: {
        color: '#deb306'
      },
    }
  ]
};
</script>

<style scoped>
.line-echarts {
  width: 100%;
  height: 250px;
}

</style>
